<div class="confirm-action" ...attributes>
  <BasicDropdown
    @horizontalPosition={{horizontalPosition}}
    @verticalPosition={{verticalPosition}}
    @onOpen={{action "toggleConfirm"}}
    @onClose={{action "toggleConfirm"}}
    as |d|>
    <d.trigger
      @tagName="button"
      class={{concat buttonClasses " popup-menu-trigger" (if d.isOpen " is-active")}}
      type="button"
      disabled={{disabled}}
      data-test-confirm-action-trigger="true"
    >
      {{yield}}
      {{#if (eq buttonClasses 'toolbar-link')}}
        <Chevron @direction={{if showConfirm 'up' 'down'}} />
      {{/if}}
    </d.trigger>
    <d.content
      @class="popup-menu-content"
    >
      <div class="box confirm-action-message">
        <div class="message is-highlight">
          <div class="message-title">
            <Icon @glyph="alert-triangle" />
            {{confirmTitle}}
          </div>
          <p>
            {{confirmMessage}}
          </p>
        </div>
        <div class="confirm-action-options">
          <button
            type="button"
            disabled={{disabled}}
            class="link is-destroy"
            data-test-confirm-button="true"
            {{action 'onConfirm'}}
          >
            {{confirmButtonText}}
          </button>
          <button
            type="button"
            class="link"
            data-test-confirm-cancel-button="true"
            {{action d.actions.close}}
          >
            {{cancelButtonText}}
          </button>
        </div>
      </div>
    </d.content>
  </BasicDropdown>
</div>
